<template>
  <div>
    <Card title="扩展方法查询" :bordered="false" :dis-hover="true">
      <div slot="extra">
        <Button
          size="small"
          type="primary"
          icon="ios-search"
          class="card-extra-item"
          @click="search"
          >查询</Button
        >
        <Button
          size="small"
          type="default"
          icon="ios-refresh"
          class="card-extra-item"
          @click="reset"
          >重置</Button
        >
      </div>
      <Form
        inline
        label-position="right"
        :label-width="100"
        :model="searchParams"
      >
        <Row>
          <Col span="6">
            <FormItem label="名称">
              <Input
                clearable
                placeholder="请输入名称"
                v-model="searchParams.name"
              />
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="扩展方法">
              <Input
                clearable
                placeholder="请输入扩展方法"
                v-model="searchParams.ext_method"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
    <Card title="扩展方法列表" :bordered="false" :dis-hover="true">
      <div slot="extra">
        <Button
          class="card-extra-item"
          size="small"
          type="primary"
          @click="createExtMethod = true"
          >创建扩展方法</Button
        >
      </div>
      <Table
        :columns="extMethodColumns"
        :data="extMethodData"
        border
        size="small"
        :tooltip-max-width="500"
      >
        <template slot-scope="{ row }" slot="action">
          <Button
            size="small"
            type="text"
            style="color: #2d8cf0"
            @click="showEditExtMethodModal(row)"
            >编辑</Button
          >
          <Poptip
            title="确定要删除吗?"
            :confirm="true"
            :transfer="true"
            @on-ok="handleDeleteExtMethod(row.id)"
          >
            <Button size="small" type="text" style="color: #ed4014"
              >删除
            </Button>
          </Poptip>
        </template>
      </Table>
      <Page
        transfer
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="page.pageSizeOpts"
        size="small"
        show-elevator
        show-sizer
        show-total
        prev-text="上一页"
        next-text="下一页"
        style="margin-top: 15px"
        @on-change="change"
        @on-page-size-change="pageSizeChange"
      />
    </Card>
    <ExtMethodCreate
      :createExtMethod.sync="createExtMethod"
      @initExtMethodTable="search"
    ></ExtMethodCreate>
    <ExtMethodEdit
      :editExtMethod.sync="editExtMethod"
      :extMethod.sync="extMethod"
      @initExtMethodTable="search"
    ></ExtMethodEdit>
  </div>
</template>
<script>
import ExtMethodCreate from "@/view/components/HttpAutoTestService/ext-method/ext-method-create";
import ExtMethodEdit from "@/view/components/HttpAutoTestService/ext-method/ext-method-edit";
import {
  getExtMethods,
  deleteExtMethod,
} from "@/api/HttpAutoTestService/ext-method";
export default {
  name: "ext-method",
  components: {
    ExtMethodCreate,
    ExtMethodEdit,
  },
  data() {
    return {
      createExtMethod: false,
      editExtMethod: false,
      searchParams: {
        name: "",
        ext_method: "",
      },
      extMethodColumns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "名称",
          key: "name",
          width: 350,
          tooltip: true,
        },
        {
          title: "扩展方法",
          key: "ext_method",
          width: 350,
          tooltip: true,
        },
        {
          title: "扩展方法说明",
          key: "ext_method_desc",
          minWidth: 350,
          tooltip: true,
        },
        {
          title: "参数说明",
          key: "args_desc",
          width: 350,
          tooltip: true,
        },
        {
          title: "返回值说明",
          key: "returned_value_desc",
          width: 350,
          tooltip: true,
        },
        {
          title: "操作",
          slot: "action",
          width: 125,
          align: "center",
          fixed: "right",
        },
      ],
      extMethodData: [],
      extMethod: {},
      page: {
        current: 1,
        total: 0,
        pageSize: 50,
        pageSizeOpts: [10, 30, 50, 100, 200],
      },
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    reset() {
      this.searchParams = {
        name: "",
        ext_method: "",
      };
    },
    search(page) {
      let data = {
        name: this.searchParams.name,
        ext_method: this.searchParams.ext_method,
        page: 1,
        page_size: this.page.pageSize,
      };
      if (typeof page == "number") {
        data.page = page;
      }
      this.page.current = data.page;

      getExtMethods(data)
        .then((res) => {
          const data = res.data;
          this.extMethodData = data.results;
          this.page.total = data.count;
          if (data.next === null) {
            this.page.current = Math.ceil(this.page.total / this.page.pageSize);
          }
          if (data.previous === null) {
            this.page.current = 1;
          }
        })
        .catch((err) => {
          this.$Modal.error({
            title: "系统异常，请联系管理员……",
            content: JSON.stringify(err),
            closable: true,
          });
        });
    },
    showEditExtMethodModal(row) {
      let {
        id,
        name,
        ext_method,
        ext_method_desc,
        args_desc,
        returned_value_desc,
      } = row;
      this.extMethod = {
        id,
        name,
        ext_method,
        ext_method_desc,
        args_desc,
        returned_value_desc,
      };
      this.editExtMethod = true;
    },
    handleDeleteExtMethod(id) {
      deleteExtMethod(id)
        .then((res) => {
          const status = res.status;
          const data = res.data;
          if (status === 200) {
            this.$Message.error(data);
          } else if (status === 204) {
            this.$Message.info("删除成功");
          }
          this.search();
        })
        .catch((err) => {
          this.$Modal.error({
            title: "系统异常，请联系管理员……",
            content: JSON.stringify(err),
            closable: true,
          });
        });
    },
    change(val) {
      this.page.current = val;
      this.search(val);
    },
    pageSizeChange(val) {
      this.page.pageSize = val;
      this.search();
    },
  },
};
</script>
<style scope>
.ivu-form-item {
  width: 100%;
}
</style>